<template>
  <el-tabs
    v-if="selected"
    style="margin: 15px"
    v-model="activeName"
    @tab-click="handleClick"
  >
    <el-tab-pane label="属性" name="first">
      <el-form ref="form" :model="selected" label-width="80px">
        <el-form-item
          :key="index"
          v-for="(prop, index) in schema.props"
          :label="prop.label"
        >
          <el-color-picker
            v-if="prop.editType === 'color'"
            v-model="selected[prop.bind]"
          ></el-color-picker>
          <el-input-number
            v-else-if="prop.editType === 'number'"
            :min="prop.min"
            :precision="prop.precision"
            :value="selected[prop.bind]"
            @change="(v) => handleNumberChange(prop, v)"
          ></el-input-number>

          <el-select
            v-else-if="prop.editType === 'pages-select'"
            v-model="selected[prop.bind]"
            placeholder="请选择"
          >
            <el-option
              v-for="page in pages.filter((p) => p.id !== current.id)"
              :key="page.id"
              :label="page.title"
              :value="page.id"
            >
            </el-option>
          </el-select>
          <el-input
            v-else
            :value="selected[prop.bind]"
            @input="(v) => handleTextInput(prop, v)"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="事件" name="second">事件</el-tab-pane>
    <el-tab-pane label="数据" name="third">数据</el-tab-pane>
    <el-tab-pane label="对象" name="fourth">
      <code-edit :code="JSON.stringify(selected, null, 2)" />
    </el-tab-pane>
  </el-tabs>
  <div style="margin: 15px" v-else>
    <div>画布属性</div>
    <el-form
      style="margin-top: 15px"
      ref="form"
      :model="bgConfig"
      label-width="80px"
    >
      <el-form-item
        :key="index"
        v-for="(prop, index) in bgSchema.props"
        :label="prop.label"
      >
        <el-color-picker
          v-if="prop.editType === 'color'"
          v-model="bgConfig[prop.bind]"
        ></el-color-picker>
        <el-input-number
          v-else-if="prop.editType === 'number'"
          :min="prop.min"
          v-model="bgConfig[prop.bind]"
        ></el-input-number>
        <el-input v-else v-model="bgConfig[prop.bind]"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import CodeEdit from "@/components/code-edit/CodeEdit";

const defaultSchema = {
  props: [],
  events: [],
  datas: [],
};

//背景的编辑结构
const bgSchema = {
  props: [
    {
      label: "背景颜色",
      editType: "color",
      bind: "bgColor",
    },
  ],
  events: [],
  datas: [],
};

//编辑映射
const map = new Map();
map.set("v-text", {
  props: [
    {
      label: "x",
      editType: "number",
      precision: 2,
      bind: "x",
    },
    {
      label: "y",
      editType: "number",
      precision: 2,
      bind: "y",
    },
    {
      label: "scaleX",
      editType: "number",
      precision: 2,
      bind: "scaleX",
    },
    {
      label: "scaleY",
      editType: "number",
      precision: 2,
      bind: "scaleY",
    },
    {
      label: "rotation",
      editType: "number",
      precision: 2,
      bind: "rotation",
    },
    {
      label: "skewX",
      editType: "number",
      precision: 2,
      bind: "skewX",
    },
    {
      label: "skewY",
      editType: "number",
      precision: 2,
      bind: "skewY",
    },
    {
      label: "文本",
      bind: "text",
    },
  ],
  events: [],
  datas: [],
});

map.set("x-image", {
  props: [
    {
      label: "地址",
      bind: "src",
    },
  ],
  events: [],
  datas: [],
});

map.set("x-flow-line", {
  props: [
    {
      label: "线宽",
      editType: "number",
      bind: "strokeWidth",
      min: 5,
    },
    {
      label: "线条底色",
      editType: "color",
      bind: "bottomColor",
    },
    {
      label: "流动颜色",
      editType: "color",
      bind: "flowColor",
    },
  ],
  events: [],
  datas: [],
});

map.set("x-solid-line", {
  props: [
    {
      label: "线宽",
      editType: "number",
      bind: "strokeWidth",
      min: 3,
    },
    {
      label: "线条颜色",
      editType: "color",
      bind: "color",
    },
  ],
  events: [],
  datas: [],
});

map.set("x-label", {
  props: [
    {
      label: "文本",
      bind: "text",
    },
    {
      label: "底色",
      editType: "color",
      bind: "bgColor",
    },
    {
      label: "文字颜色",
      editType: "color",
      bind: "fontColor",
    },
    {
      label: "文字大小",
      editType: "number",
      min: 12,
      bind: "fontSize",
    },
    {
      label: "项目",
      bind: "project",
    },
    {
      label: "设备分类",
      bind: "deviceCategory",
    },
    {
      label: "设备",
      bind: "device",
    },
    {
      label: "数据点",
      bind: "dataPoint",
    },
  ],
  events: [],
  datas: [],
});

map.set("x-jump-button", {
  props: [
    {
      label: "文字",
      bind: "text",
    },
    {
      label: "底色",
      editType: "color",
      bind: "bgColor",
    },
    {
      label: "文字颜色",
      editType: "color",
      bind: "fontColor",
    },
    {
      label: "文字大小",
      editType: "number",
      min: 12,
      bind: "fontSize",
    },
    {
      label: "跳转页面",
      editType: "pages-select",
      min: 12,
      bind: "jumpTarget",
    },
  ],
  events: [],
  datas: [],
});

export default {
  name: "PropEditor",
  components: {
    CodeEdit,
  },
  props: {
    selected: {
      type: Object,
    },
    bgConfig: {
      type: Object,
    },
    pages: {
      type: Array,
    },
    current: {
      type: Object,
    },
  },
  computed: {
    schema() {
      return map.get(this.selected.xType) ?? defaultSchema;
    },
  },
  data() {
    return {
      activeName: "first",
      bgSchema: bgSchema,
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleNumberChange(prop, v) {
      if (
        this.selected !== null &&
        this.selected !== undefined &&
        v !== null &&
        v !== undefined
      ) {
        this.selected[prop.bind] = v;
        this.$emit("change", prop, v);
      }
    },
    //此处是为了修改text内容文字时,也同步刷新一下选中后变换框的大小和尺寸
    handleTextInput(prop, v) {
      if (
        this.selected !== null &&
        this.selected !== undefined &&
        v !== null &&
        v !== undefined &&
        v !== "" //特别注意这里对于空字符串不进行变换,否则选中对象可能缩小至一个点或者一条及细的线段而变得难以再次被选中
      ) {
        this.selected[prop.bind] = v;
        this.$emit("change", prop, v);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>